<template>
  <div class="lecturer-add-div">
    <div>{{props.data.formId}}</div>
    <el-form ref="form" :model="formData" :rules="rules" label-width="100px">
      <el-form-item label="讲师名称" prop="name">
        <el-input size="small" v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="handleSubmitAndReturn">保存</el-button>
        <el-button size="mini" @click="handleReturn">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
   /***基础组件引入***/
    import { reactive, ref, watch, toRefs, onMounted } from 'vue'
  
     /*****请求组件引入****/
    import { addFormAttr} from '@/api/formAttr';

   
    /*
    const goodsInfo: any = computed({
        get: () => props.modelValue,
        set: (value) => {
            emit('update:modelValue', value);
        },
    });
    */

    const state = reactive({
      formData: {
          name: props.data.formId
      },
      editorOption:'',
      saveDataNo: [],
    });
    const {
      formData,
      saveDataNo
    } = toRefs(state);

    
    function handleSubmitAndReturn() {
      let _this = this;
      _this.handleSubmit("handleReturn");
    };
    
    
    function handleSubmit(callName) {
      let _this = this;
      _this.$refs["form"].validate((valid) => {
        if (valid) {
          _this.$request.post(
            "/hwk-teacher-train-microservice/lecturer/insert",
            _this.formData,
            function (r) {
              if (r.code == 1200) {
                _this.$message({ message: "添加成功", type: "success" });
                //重载绑定的数据
                _this.saveDataNo++;
                if (callName) {
                  _this[callName]();
                }
              } else {
                _this.$message({ message: r.message, type: "error" });
              }
            }
          );
        } else {
          return false;
        }
      }); 
    }

    /**子组件调用父的方法**/
    const emits = defineEmits(['callback']);
    const handleReturn = () => {
     /*   let _this = this;
        let initProp = {};
        if (_this.saveDataNo > 0) {
            initProp = { callName: "load" };
        }
        _this.saveDataNo = 0;
        _this.formData = {};
        _this.formData.selectedType = [];
        _this.$emit("callback", initProp);
        },*/
        emits('callback',{formId:'12123213'})
    };

    /**监控父组件传值并赋值***/
     const props = defineProps({
        data: Object
    });

    watch(() => props.data,
       // 回调函数 callback
       (newValue, oldValue) => {

         state.formData.name =  props.data.formId;
       }, {immediate:true, deep: true}
    );
   
</script>

<style>
  .lecturer-add-div .avatar-uploader {
    padding: 10px 10px 0px 10px;
  }
  .lecturer-add-div .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
  }
  .lecturer-add-div .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
  }
  .lecturer-add-div .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;

  }
  .lecturer-add-div .avatar {
      width: 80px;
      height: 80px;
      display: block;
  }
</style>